<template>
  <div class="taskdetail">
    <div v-if="this.taskStatus == 4" style="margin-bottom:13%;">
      <div v-if="taskdata.task_coupons == 1" style="position:sticky;top:0;width:100%;z-index:999;">
        <van-notice-bar text="注意：当前任务佣金不是立返，需后台24小时内审核之后才能提现！！！" left-icon="volume-o"/>
      </div>
      <div class="countbox">
        <span style="margin-left:6px">剩余时间：{{ hour }}:{{ min }}:{{ second }}</span>
      </div>
      <div class="goods">
        <div class="goodsbox">
          <span class="typestyle"
                :class="{'red':taskdata.task_class == 'pt','green':taskdata.task_class == 'll',
                'blue':taskdata.task_class == 'pj','darkgreen':taskdata.task_class == 'gy'}">
            {{ taskdata.task_class == 'pt' ? '普通单' : (taskdata.task_class == 'll' ? '浏览单' : (taskdata.task_class == 'pj' ? '评价单' : '隔夜单')) }}</span>
          <div style="text-align:center" class="mosaic">
            <img :src="taskdata.picture_address" alt="" style="width:110px;height:110px;margin:0;">
            <img src="../assets/_S_R_9_7TFA9KC5G_RLJD_A-removebg-preview.png" alt=""
                 style="width:110px;height:110px;position: absolute;top:13%;left:34%;">
          </div>
          <p class="second">
            <span class="first">请在<span
              style="color:#ec0c36;"> {{ this.taskdata.create_time }} </span>前完成以下操作，否则将自动作废噢哦</span>
            <span class="first">本次任务淘宝号：<span
              style="color:#1005a1;"> {{ this.taskdata.brushhands_tbname }} </span></span>
            <span style="color:red;font-weight:600;">本此任务佣金：{{ taskdata.task_yjmoney }}元</span>
          </p>
        </div>
      </div>
      <div class="step">
        <van-divider dashed>任务流程</van-divider>
        <p style="font-size:25px;color:red;font-weight:600">最近出很多直接搜索店铺名字的买手</p>
        <p style="font-size:25px;color:red;font-weight:600">但凡直接搜店铺名字的查到永久冻结</p>
        <p style="font-size:25px;color:red;font-weight:600">按照关键词做，找不到联系客服</p>
        <div class="first">
          <p class="title" style="margin-bottom:10px;">注意事项：</p>
          <p class="sorting">商家提示：<span style="color:#ec0c36;">{{ taskdata.tipsninfo.split('+++***')[0] }}</span></p>
          <p class="sorting" style="margin-bottom:10px;margin-top:10px;" v-show="taskdata.task_shopname != '熙玖禧旗舰店'">店铺名称：<span style="color:#ec0c36;">{{'**'+taskdata.task_shopname.substr(1, 1)+'**'+taskdata.task_shopname.substr(3, 1)+'**'+taskdata.task_shopname.substr(-1, 1)}}</span></p>
        </div>
        <div v-if="tip_all.length>0" style="width:95%;margin:20px auto;display:flex;font-weight:600;flex-direction:column;font-size:20px;color:red">
          <p>一单多款:</p>
          <p>1.核对每个商品的淘口令，加入购物车</p>
          <p>2.主商品和副商品都加购然后从购物车中核对金额，</p>
          <p>付款提交实付金额为购物车中多款价格之和</p>
          <p>每一件商品只能够买一件！！</p>
        </div>
        <div class="first">
          <p class="title">打开<b style="color:red;font-weight:600">TB</b>,按照以下步骤操作<b style="color:red;font-weight:600">(点击关键词可复制)</b></p>
          <van-steps :active="active" direction="vertical">
            <van-step v-copy="taskdata.key_word">关键字：<b style="text-decoration:underline;color:red;font-weight:600;">{{ taskdata.key_word }}</b></van-step>
          </van-steps>
          <p class="sorting" style="margin-bottom:10px;margin-top:10px;display:flex;font-size:16px;" v-if="taskdata.note_img!=''">
            下单二维码：<img :src="taskdata.note_img" style="width:100px;height:100px;" alt="">
          </p>
          <p class="title" style="border-left:3px solid white;">主款验证淘口令：<span class="copy"
                                                                              @click="$router.push('/introduce')">查看淘口令</span>
          </p>
          <div class="fieid">
            <van-field v-model="sstext" type="textarea" placeholder="请输入淘口令..." clearable @change="checktkl"/>
          </div>
          <van-button type="info" size="small" style="width:100px;margin-left:10px;margin-bottom:10px;">验证淘口令
          </van-button>
          <el-card v-if="tip_all.length>0">
            <span style="font-size:20px;font-weight:600">一单多款</span>
            <div style="display:flex;flex-direction: column;" v-for="(i,index) in tip_all">
              <div style="text-align:left;margin:20px 15px;display:flex;" class="mosaic">
                <span style="font-size:16px;">副款主图：</span>
                <div class="IMGAGE">
                  <viewer>
                    <img :src="i.IMG" alt="" style="width:120px;height:120px;"/>
                  </viewer>
                </div>
                <span style="font-size:16px;color:red;">(点图可放大)</span>
              </div>
              <p class="title" style="border-left:3px solid white;" v-copy="i.name">副款验证淘口令：(点击关键词即可复制)<span
                class="copy">关键词：{{ i.name }}</span>
              </p>
              <div class="fieid">
                <van-field v-model="sstext_FU[index]" type="textarea" placeholder="请输入淘口令..." clearable
                           @change="checktkl_FU(i,index)"/>
              </div>
              <van-button type="info" size="small" style="width:100px;margin-left:10px;margin-bottom:10px;">验证淘口令
              </van-button>
            </div>
          </el-card>
          <p class="title" style="color:red;border-left:3px solid white;margin-top:5px;font-size:18px"
             v-if="shifu && taskdata.task_class != 'll'">
            验证淘口令通过，实际支付金额为 <span
            style="font-weight:600;color: #e9010e">{{ taskdata.task_class == 'll' ? taskdata.task_coupons : taskdata.task_bjmoney }}</span>
            元.
          </p>
          <p class="title" style="margin-bottom:10px;">完成目标：</p>
          <div
            style="width:100%;height:200px;display:flex;flex-direction: column;justify-content: space-around;margin-left:10px;">
            <van-checkbox v-model="checked_one" shape="square" style="font-size:14px;">进店前货比三家 > 验证淘口令</van-checkbox>
            <van-checkbox v-model="checked_two" shape="square" style="font-size:14px;">店内浏览三分钟以上> 收藏商品</van-checkbox>
            <van-checkbox v-model="checked_three" shape="square" style="font-size:14px;">加购物车 > 关注店铺 >
              <span v-if="taskdata.task_class != 'll'" style="">购物车下单</span></van-checkbox>
            <van-checkbox v-model="checked_four" shape="square" style="font-size:14px;"><b
              style="color:red;font-size:18px;">不可使用</b>淘客,淘金币,花呗，信用卡等。
            </van-checkbox>
            <van-checkbox v-model="checked_five" shape="square" style="font-size:14px;">确认下单金额以及要求符合任务要求</van-checkbox>
            <van-checkbox v-model="checked_six" shape="square" style="font-size:14px;">在1小时内付款以及提交任务，防止任务被取消
            </van-checkbox>
          </div>
          <p class="title" style="margin-bottom:10px;">核实信息：</p>
          <div style="display:flex;align-items: center;margin:20px auto;">
            <span style="font-size:16px;">金额：</span>
            <el-input type="primary" style="width:200px" placeholder="写实付金额" v-model.trim="VerifyMoney"></el-input>
            <el-button type="danger" @click="verificationPrices()">核实金额</el-button>
          </div>
          <div style="display:flex;align-items: center;margin:20px auto;">
            <span style="font-size:16px;">旺旺：</span>
            <el-input type="primary" style="width:200px" placeholder="请输入下单旺旺号" v-model.trim="VerifyWangWang"></el-input>
              <el-button type="danger" @click="verificationWangWang()">核实旺旺</el-button>
          </div>
          <div style="display:flex;justify-content: center;align-items: center;flex-direction: column;">
            <p style="font-size:20px;color:red;">确保支付旺旺和接单旺旺一致，</p>
            <p style="font-size:20px;color:red;">否则拒绝审核，需要退款</p>
          </div>
        </div>
        <!--        <div class="first">-->
        <!--          <p class="title" style="margin-bottom:10px;">筛选条件：</p>-->
        <!--          &lt;!&ndash;          <p class="sorting">关键字：<span>{{taskdata.key_word}}</span></p>&ndash;&gt;-->
        <!--          <p class="sorting">排序方式：<span style="color:#ec0c36;">{{taskdata.sort_order}}</span></p>-->
        <!--          <p class="sorting">筛选方式：<span style="color:#ec0c36;">{{taskdata.race_selection}}</span></p>-->
        <!--        </div>-->
        <p class="tips" v-if="llsuccess"> 验证成功，您可以点击下方 我已浏览 按钮提交任务！</p>
        <div class="btnlist">
          <div class="btn one" @click="onready" v-if="taskdata.task_class == 'pt'">我已付款</div>
          <div class="btn one" @click="onready" v-if="taskdata.task_class == 'pj'">我已付款</div>
          <div class="btn one" @click="onbrowse" v-if="taskdata.task_class == 'll'">我已浏览</div>
          <div class="btn one" @click="onready" v-if="taskdata.task_class == 'gy' && whereing.tkl_status == 1">我已付款
          </div>
          <div class="btn two" @click="cancelDialog = true">取消任务</div>
        </div>
        <van-dialog v-model="cancelDialog" title="订单号" show-cancel-button @confirm="canTask"
                    @cancel="cancelDialog = false">
          <span class="istrue">确认取消当前任务吗？</span>
        </van-dialog>
        <!--商家提示弹框-->
        <van-dialog v-model="Dialogs" :showConfirmButton="false" @cancel="Dialogs = false" class="bussness">
          <div style="display:flex;flex-direction: column;justify-content:space-around;align-items: center;">
            <span class="title" style="border-left:3px solid white;text-align: left;margin-top:5%">请认真阅读下面内容，不遵守冻结账户
            </span>
            <span
              style="color:#ec0c36;margin-top:5%;flex-wrap:nowrap;">{{ taskdata.tipsninfo.split('+++***')[0] }}</span>
            <div class="yuedu" @click="finishs()">我已阅读</div>
          </div>
        </van-dialog>
        <!--浏览单-->
        <van-dialog v-model="Dialoging" :showConfirmButton="false" @cancel="Dialoging = false">
          <div style="width:90%;display:flex;justify-content: center;align-items: center;margin:30px auto;height:100%;flex-direction: column;
overflow-y: scroll;">
            <p class="title" style="border-left:3px solid white;margin-top:5%">商家提示
            </p>
            <span style="color:#ec0c36;margin-top:5%">浏览单不得付款，只需浏览</span>
            <van-button type="danger" size="normal" @click="finishs()">我已阅读,({{ socre }}秒)</van-button>
          </div>
        </van-dialog>
      </div>
      <van-dialog v-model="numDialog" title="订单号" show-cancel-button @confirm="onConfirm" @cancel="onCancel">
        <van-field v-model.trim="numval" clearable label="订单号" left-icon="shopping-cart" placeholder="请输入订单号"/>
      </van-dialog>
      <!--隔夜单倒计时-->
      <van-dialog v-model="logs" class="yanzheng_"
                  v-if="whereing.tkl_status == 1 && new Date().getTime()<(whereing.pay_time)*1000"
                  :showConfirmButton="false" :show-cancel-button="false">
        <div
          style="margin-top:5%;text-align:left;display:flex;flex-direction: column;align-items:center;justify-content: space-around;width:100%;height:100%;overflow-y: scroll;">
          <span style="font-size:16px;font-weight:600;">操作流程</span>
          <br/>
          <span style="color:black;font-size:18px;width:90%;font-weight:600;">请按照正常流程:<b style="color:red;">货比,关注店铺,收藏,加购(按照商家提示和验证淘口令的金额进行加购)不要付款</b></span>
          <br/>
          <span style="font-size:16px;font-weight:600;">商家提示</span>
          <span style="color:black;font-size:18px;width:90%;font-weight:600;"><b
            style="color:#ec0c36;">{{ taskdata.tipsninfo.split('+++***')[0] }}</b></span>
          <br/>
          <span style="font-size:16px;color:black;font-weight:600;">
              倒计时完成后在（ <b style="color:red;">{{ ['', '足迹', '购物车', '收藏', '搜索'][whereing.orderway] }}</b>）里下单</span>
          <br/>
          <span style="color:black;font-size:18px;font-weight:600;">下单时间：<b
            style="color:red;font-size:18px;">{{ whereing.pay_time * 1000 | moment }}</b></span>
          <span style="font-size:20px;font-weight:600;color:red;">本单为隔夜单，请在规定时间下单</span>
        </div>
      </van-dialog>
      <van-dialog v-model="questionDialog" title="浏览验证" show-cancel-button @confirm="handleConfirm"
                  @cancel="questionDialog = false">
        <van-field v-model="questionvalone" label="问题一" left-icon="question"/>
        <van-field v-model="answervalone" clearable label="答案" left-icon="checked" placeholder="请输入答案"/>
        <van-field v-model="questionvaltwo" label="问题二" left-icon="question"/>
        <van-field v-model="answervaltwo" clearable label="答案" left-icon="checked" placeholder="请输入答案"/>
      </van-dialog>

      <van-dialog style="padding: 20px" v-model="payment" :show-cancel-button="false" :showConfirmButton="false"
                  class="yanzheng">
        <div style="margin-top:40%;text-align: center;">
          <h3 style="color:white;"><b v-if="whereing.task_coupon !=0">使用优惠卷之后</b>应付实际金额为{{taskdata.task_class == 'll' ? taskdata.task_coupons : taskdata.task_bjmoney}}元</h3>
          <p v-if="whereing.task_coupon !=0" style="font-size:16px;color:white;">使用店铺中<b style="color:red;font-weight:600;">{{whereing.task_coupon}}</b>的优惠卷</p>
          <br/>
          <div style="display:flex;align-items: center;margin:20px auto;">
            <span style="font-size:16px;">金额：</span>
            <el-input type="primary" style="width:120px" placeholder="确认购买金额" v-model="VerifyMoney"></el-input>
            <el-button type="danger" @click="verificationPrices()">确认金额</el-button>
          </div>
          <div class="yuedu_" @click="tiaozhuan()">
            确认验证
          </div>
        </div>
      </van-dialog>
      <van-dialog v-model="Dialog_" :show-cancel-button="false" :show-confirm-button="false" class="yanzheng">
        <div style="margin-top:45%;text-align: center;">
          <h3 style="color:white;font-size:20px;">如若还未找到商品，可联系客服加时间。</h3>
          <p style="color:white;">任务还剩10分钟</p>
          <img src="../assets/funs.png" style="width:150px;margin-top:10%" alt="">
          <div class="confirms" @click="Dialog_ = false">
            确认
          </div>
          <div class="cancels" @click="cancelDialog = true">
            取消任务
          </div>
        </div>
      </van-dialog>
      <van-dialog v-model="Dialog_zero" :show-cancel-button="false" :show-confirm-button="false" class="yanzheng">
        <div style="margin-top:50%;text-align: center;">
          <h3 style="color:white;font-size:20px;">任务时间已到,可联系客服加时间。</h3>
          <img src="../assets/funs.png" style="width:150px;margin-top:10%;margin-left:0" alt="">
        </div>
        <div class="confirms" @click="contents()">
          联系客服
        </div>
        <div class="cancels" @click="cancelDialog = true">
          取消任务
        </div>
      </van-dialog>
    </div>

    <div class="nodata" v-else>
      <img src="../assets/img/nodata.png" alt="">
      <span class="textcontent">没有正在执行的任务哦，马上去申请</span>
      <span class="taskbtn" @click="$router.push('/home')">申请任务</span>
    </div>
    <return></return>
    <Footer permsg='2'>
    </Footer>
  </div>
</template>

<script>
import {
  taskprogress,
  verificationtkl,
  verificationPrice,
  syncorder,
  cancelTask,
  getuserstatus,
  verification_problem,
  audit_task
} from '../api/api';
import Footer from '../components/footer.vue'
import aestool from '@/utils/aestool.js';
import moment from 'moment'
import Return from "./returnone";
import AgainReturn from "./AgainReturn";
export default {
  components: {Return, Footer},
  data() {
    return {
      VerifyMoney: '',
      sstext: '',
      sstext_FU: [],
      checked_one: false,
      checked_two: false,
      checked_three: false,
      checked_four: false,
      checked_five: false,
      checked_six: false,
      VerifyWangWang:"",
      socre: 5,
      numval: '',
      active: "",
      numDialog: false,
      Dialog_: false,
      Dialog: false,
      Dialog_zero: false,
      Dialogs: false,
      Dialoging: false,
      Dialog_tkl: false,
      shifu: false,
      logs: true,
      disabled: false,
      payment: false,
      cancelDialog: false,
      questionDialog: false,
      llsuccess: false,
      showFlag: false,
      show: true,
      taskdata: {},
      hour: '',
      min: '',
      second: '',
      tipsninfo_ID: "",
      taskStatus: '',
      shopname: '',
      questionvalone: '',
      tipsninfo: [],
      tipsninfo_IMG: [],
      answervalone: '',
      questionvaltwo: '该商品的店铺全称是什么？',
      answervaltwo: '',
      whereing: {},
      hourGY: "",
      minGY: "",
      secondGY: "",
      tkl_time: "",
      tip_all: []
    }
  },
  mounted() {
    this.getStatus()
    this.countDown()
  },
  methods: {
    verificationWangWang(){
        if(this.VerifyWangWang!=this.taskdata.brushhands_tbname){
           this.$toast('接单旺旺与下单旺旺不一致')
        }else{
          this.$toast('旺旺一致，请提交任务')
        }
    },
    verificationPrices() {
      let params = {
        task_id: this.taskdata.id.toString(),
        price: Number(this.VerifyMoney),
      }
      verificationPrice(params).then(res => {
        if (res.Status == 200) {
          this.$toast(res.Message)
        } else {
          this.$toast(res.Message)
        }
      })
    },
    contents() {
      window.location.href = 'http://wpa.qq.com/msgrd?v=3&uin=814322587'
    },
    tiaozhuan() {
      if(this.VerifyMoney != ''){
        this.payment = false
      }else{
         this.$toast('请先确认金额')
      }
      // this.getTaskData()
    },
    finishs() {
      // if (this.socre == 0) {
        this.Dialogs = false
        this.Dialoging = false
      // } else {
      //   this.$toast('请先阅读完商家提示')
      // }
    },
    countDown() {
      let clock = window.setInterval(() => {
        this.socre--
        if (this.socre <= 0) {
          window.clearInterval(clock)
        }
      }, 1000)
    },
    //放大图片
    img_change() {
      this.showFlag = true;
    },
    onKeyCopy(e) {
      this.$toast('复制成功！')
    },
    onKeyError(e) {
      this.$toast('复制失败！')
    },
    onCopy(e) {
      this.$toast('复制成功！')
    },
    onError(e) {
      this.$toast('复制失败！')
    },
    //获取活动状态
    getStatus() {
      getuserstatus().then(res => {
        if (res.data.Status == 200) {
          let tempdata = JSON.parse(aestool.decrypt(res.data.Data, '123456asdzxcqwe0'))
          console.log(tempdata);
          this.taskStatus = tempdata.task_status
          if (tempdata.task_status == 4) {
            this.getTaskData()
          }
        }
      })
    },
    //副淘口令
    checktkl_FU(i, index) {
      console.log(i.babyID);
      let toastload = this.$toast.loading({
        message: '加载中...',
        forbidClick: true
      });
      let params = {
        baby_id: aestool.encrypt(i.babyID, 'cpf814322587qwer'),
        tkl: this.sstext_FU[index],
        task_id: aestool.encrypt(this.taskdata.id, 'cpf814322587qwer'),
      }
      verificationtkl(params).then(res => {
        toastload.clear()
        if (res.Status == 200) {
          this.$toast({
            duration: 5000,
            message: res.Message
          })
          sessionStorage.setItem('tkl', this.sstext_FU[index])
          if (this.taskdata.task_class == 'll') {
            this.payment = false
            this.llsuccess = true
          } else {
            this.payment = true
            this.shifu = true
            this.Dialog = true
            this.llsuccess = false
          }
        } else {
          this.payment = false
          this.$toast(res.Message)
        }
      })
    },
    //主验证淘口令
    checktkl() {
      console.log(this.taskdata.baby_id);
      let toastload = this.$toast.loading({
        message: '加载中...',
        forbidClick: true
      });
      let params = {
        baby_id: aestool.encrypt(this.taskdata.baby_id, 'cpf814322587qwer'),
        tkl: this.sstext,
        task_id: aestool.encrypt(this.taskdata.id, 'cpf814322587qwer'),
      }
      verificationtkl(params).then(res => {
        toastload.clear()
        if (res.Status == 200) {
          window.localStorage.setItem('tkl_time', res.Data + 5 * 60)
          this.countTimeGY()
          this.$toast({
            duration: 5000,
            message: res.Message
          })
          this.getTaskData()
          sessionStorage.setItem('tkl', this.sstext)
          if (this.taskdata.task_class == 'll') {
            this.payment = false
            this.llsuccess = true
          } else {
            this.payment = true
            this.shifu = true
            this.Dialog = true
            this.llsuccess = false
          }
        } else {
          this.payment = false
          this.$toast(res.Message)
        }
      })
    },
    //倒计时
    countTimeGY() {
      this.tkl_time = window.localStorage.getItem('tkl_time')
      // if (this.whereing.tkl_status == 1 && new Date().getTime() < (this.whereing.takl_time + 5 * 60) * 1000) {
      //   this.Dialog_tkl = true
      //   this.shifu = true
      // }
      const moment = require('moment')
      var date = new Date();
      var now = date.getTime();
      var end = (this.whereing.takl_time + 5 * 60) * 1000
      //时间差
      var leftTime = end - now;
      if (leftTime >= 0) {
        // 时
        let h = Math.floor(leftTime / 1000 / 60 / 60 % 24)
        this.hourGY = h < 10 ? '0' + h : h
        // 分
        let m = Math.floor(leftTime / 1000 / 60 % 60)
        this.minGY = m < 10 ? '0' + m : m
        // 秒
        let s = Math.floor(leftTime / 1000 % 60)
        this.secondGY = s < 10 ? '0' + s : s
      } else {
        this.hourGY = '00'
        this.minGY = '00'
        this.secondGY = '00'
      }
      // 等于0的时候不调用
      if (Number(this.hourGY) === 0 && Number(this.minGY) === 0 && Number(this.secondGY) === 0) {
        // this.Dialog_tkl = false
        return
      } else {
        setTimeout(this.countTimeGY, 1000)
      }
    },
    //倒计时
    countTime() {
      var date = new Date();
      var now = date.getTime();
      //设置截止时间
      let time = moment(this.taskdata.create_time).format('YYYY/MM/DD HH:mm:ss');
      var endDate = new Date(time);
      var end = endDate.getTime();
      //时间差
      var leftTime = end - now;
      if (leftTime >= 0) {
        // 时
        let h = Math.floor(leftTime / 1000 / 60 / 60 % 24)
        this.hour = h < 10 ? '0' + h : h
        // 分
        let m = Math.floor(leftTime / 1000 / 60 % 60)
        this.min = m < 10 ? '0' + m : m
        // 秒
        let s = Math.floor(leftTime / 1000 % 60)
        this.second = s < 10 ? '0' + s : s
      } else {
        this.hour = '00'
        this.min = '00'
        this.second = '00'
      }
      if (Number(this.min) == 10 && Number(this.second) == 0 && this.taskdata.task_class != 'gy') {
        this.Dialog_ = true
      }
      if (this.min == '00' && this.second == '00' && this.taskdata.task_class != 'gy') {
        this.Dialog_zero = true
      }
      // 等于0的时候不调用
      if (Number(this.hour) === 0 && Number(this.min) === 0 && Number(this.second) === 0) {
        return
      } else {
        setTimeout(this.countTime, 1000)
      }
    },
    //获取活动详情
    getTaskData() {
      let toastload = this.$toast.loading({
        message: '加载中...',
        forbidClick: true
      });
      taskprogress().then(res => {
        toastload.clear()
        if (res.Status == 200) {
          this.taskdata = JSON.parse(aestool.decrypt(res.Data, 'cpf123456tasklis'))
          console.log(this.taskdata, 'taskdata');
          var date = new Date(this.taskdata.create_time)
          var time = (date.getTime()) / 1000
          let timer = time + 3600
          this.taskdata.create_time = this.timestampToTime(timer)
          let length = this.taskdata.task_shopname.length
          this.shopname = this.taskdata.task_shopname.substring(0, 1) + '*****'
          this.countTime()
          this.whereing = this.taskdata.where
          if (this.whereing.tkl_status == 1) {
            this.countTimeGY()
            console.log(this.whereing.tkl_status);
          }
          if (this.taskdata.task_class != 'll') {
            this.Dialogs = true
          } else if (this.taskdata.task_class == 'll') {
            this.Dialoging = true
          }
          this.tipsninfo = this.taskdata.tipsninfo.split('+++***')[1].split(',')
          this.tipsninfo_ID = this.taskdata.tipsninfo.split('+++***')[2].split(',')
          this.tipsninfo_IMG = this.taskdata.tipsninfo.split('+++***')[3].split(',')
          if (this.tip_all.length == 0) {
            if (this.tipsninfo[0] != '' && this.tipsninfo_ID[0] != '' && this.tipsninfo_IMG[0] != '') {
              this.tipsninfo.forEach((item, index) => {
                this.tip_all.push({name: item, babyID: this.tipsninfo_ID[index], IMG: this.tipsninfo_IMG[index]})
              })
            }
          }
          let tkltext = sessionStorage.getItem('tkl')
          if (tkltext) {
            this.sstext = tkltext
            if (this.taskdata.task_class == 'll') {
              this.payment = false
              this.llsuccess = true
            } else {
              this.payment = true
              this.llsuccess = false
            }
          }
        } else {
          this.taskStatus = 1
          this.$toast(res.Message)
        }
      })
    },
    //时间戳转日期
    timestampToTime(timestamp) {
      var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + '-';
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
      var D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ';
      var h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
      var m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
      var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    },
    //已付款
    onready() {
      if (this.whereing.tkl_status == 0) {
        this.$toast('请先验证淘口令！')
      } else {
        if (this.checked_one == false || this.checked_two == false || this.checked_three == false || this.checked_four == false || this.checked_five == false || this.checked_six == false) {
          this.$toast('请确认目标要求是否完成！')
        } else {
          if (this.VerifyMoney == '' || this.VerifyWangWang == '') {
            this.$toast('请核实金额或者旺旺号')
          } else {
            let params = {
              task_id: this.taskdata.id.toString(),
              price: Number(this.VerifyMoney),
            }
            verificationPrice(params).then(res => {
              if (res.Status == 200) {
                  this.numDialog = true
                  this.numval = ''
                  this.$toast(res.Message)
              } else {
                this.$toast(res.Message)
              }
            })
          }
        }
      }
    },
    //已浏览
    onbrowse() {
      if (this.whereing.tkl_status == 0) {
        this.$toast('请先验证淘口令！')
      } else {
        this.questionvalone = this.taskdata.timetask
        this.answervalone = ''
        // this.answervaltwo = ''
        this.questionDialog = true
      }
    },
    //取消活动
    canTask() {
      let params = {
        cancel_task: aestool.encrypt(this.taskdata.id, 'CancelTaskxcqwe0'),
      }
      cancelTask(params).then(res => {
        if (res.Status == 200) {
          this.$toast(res.Message)
          sessionStorage.removeItem('tkl')
          setTimeout(() => {
            this.getStatus()
          }, 1500);
        } else {
          this.$toast(res.Message)
        }
      })
    },
    //确认活动
    onConfirm() {
      if (this.numval == '' && this.numval.length < 19) {
        this.$toast('任务编号不可以为空或号码不可少于19位！')
      } else {
        let toastload = this.$toast.loading({
          message: '加载中...',
          forbidClick: true,
          duration:1500
        });
        let params = {
          task_id: aestool.encrypt(this.taskdata.id, 'Syncorderzxcqwe0'),
          order: aestool.encrypt(this.numval, 'Syncorderzxcqwe0'),
          shop_name: aestool.encrypt(this.taskdata.task_shopname, 'Syncorderzxcqwe0')
        }
        if (this.taskdata.task_coupons == 1) {
          audit_task(params).then(res => {
            console.log('审核单', res)
            toastload.clear()
            if (res.Status == 200) {
              this.$toast(res.Message)
              setTimeout(() => {
                this.$router.push('/home')
              }, 1500);
            } else {
              this.$toast(res.Message)
            }
          })
        } else {
          syncorder(params).then(res => {
            toastload.clear()
            if (res.Status == 200) {
              this.$toast(res.Message)
              setTimeout(() => {
                this.$router.push('/home')
              }, 1500);
            } else {
              this.$toast(res.Message)
            }
          })
        }
      }
    },
    onCancel() {
      this.numDialog = false
    },
    //确认浏览
    handleConfirm() {
      if (this.answervalone == '') {
        this.$toast('答案不可以为空！')
      } else {
        let params = {
          task_id: aestool.encrypt(this.taskdata.id, 'Verificationprob'),
          answer: aestool.encrypt(this.answervalone, 'Verificationprob'),
          shopanme: aestool.encrypt(this.answervaltwo, 'Verificationprob'),
        }
        verification_problem(params).then(res => {
          this.$toast(res.Message)
          if (res.Status == 200) {
            setTimeout(() => {
              this.$router.push('/taskmanage')
            }, 1500);
          }
        })
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.taskdetail {
  padding-bottom 56px
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  .IMGAGE {
    width: 110px;
    height: 110px;
    position: relative;
  }

  .istrue {
    display block
    padding 10px 16px
  }

  .field {
    padding-bottom 0
  }

  .fieid {
    border 1px solid #f1f1f1
    margin 10px
  }

  .nodata {
    padding-top: 80px
    display flex
    flex-direction column
    justify-content center
    align-items center

    img {
      width 70%
    }

    .textcontent {
      font-size 14px
      color #a79478
    }

    .taskbtn {
      width 200px
      color #ffffff
      font-size 14px
      background #64c5ff
      text-align center
      line-height 36px
      margin-top 20px
    }
  }

  .countbox {
    position sticky
    top 0
    z-index 999
    width 100%
    color rgb(25, 137, 250)
    background rgb(236, 249, 255)
    text-align center
    display flex
    align-items center
    height 40px
    justify-content center
    font-size 14px

    .van-count-down, .van-divider {
      color rgb(25, 137, 250)
    }
  }

  .green {
    background #00d5c3
  }

  .red {
    background #f54d21
  }

  .blue {
    background #04a7f5
  }

  .darkgreen {
    background darkgreen
  }

  .goods {
    background url(../assets/img/task.jpg) no-repeat top center
    background-size cover
    height 142px
    position relative

    .goodsbox {
      position absolute
      padding 30px 10px
      background #fff
      margin 56px 30px 20px
      font-size 14px
      border-radius 6px
      box-shadow 0px 1px 8px 0px #eaeaea

      .typestyle {
        position: absolute;
        display inline-block
        line-height 24px
        color white
        padding 0 10px
        border-top-right-radius 12px
        border-bottom-right-radius 12px
      }

      .first {
        display block
        line-height 20px
      }

      img {
        width 80px
        height 80px
        margin-bottom 10px
      }
    }
  }

  .step {
    margin-top 160px

    .keyword {
      padding 10px 16px
      font-size 14px
    }

    .first {
      padding 0 16px

      .btntwo {
        display flex
        justify-content space-between
        align-items center
        margin 0 15px 10px 10px

        span {
          display block
          text-align center
          border-radius 20px
          font-size 14px
          width 49%
          line-height 35px
          color #fff
        }

        .check {
          background #ff976a
        }

        .clear {
          background #1989fa
        }
      }

      .title {
        border-left 3px solid #5463f0
        padding-left 10px
        font-size 14px

        .copy {
          color #02acfa
          text-decoration underline
        }
      }

      .sorting {
        padding 0 16px 0
        font-size 16px
      }

      .iptstyle {
        border 0
        background #f1f1f1
        border-radius 6px
        padding 10px
        font-size 14px
        width 87%
        margin 10px 10px 0 10px
      }
      textarea:

      :-webkit-input-placeholder {
        color #929292
        font-size 14px
      }
    }

    .tips {
      background #fccbcb
      color #e9010e
      padding 5px 16px
      font-size 14px
    }

    .btnlist {
      display flex
      justify-content space-around
      align-items center
      font-size 14px
      margin 10px 0

      .btn {
        width 30%
        line-height 40px
        text-align center
        border-radius 20px
      }

      .one {
        color #5463f0
        background #f2f2f2
      }

      .two {
        color #ffffff
        background #5463f0
      }
    }
  }
}
</style>

<style>
.first .van-cell:not(:last-child)::after {
  border-bottom: 0;
}

.bussness {
  width: 90%;
  display: flex;
  background: url("../assets/bluebk.png");
  background-size: 100% 100%;
  justify-content: center;
  align-items: center;
  margin: 10px auto;
  height: 450px;
  flex-direction: column;
  overflow-y: scroll;
}

.yuedu {
  width: 80%;
  font-size: 18px;
  border-radius: 10px;
  height: 50px;
  position: absolute;
  bottom: 10%;
  left: auto;
  display: flex;
  color: white;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(left, rgb(62, 128, 255), rgb(77, 173, 255));
}

.confirms {
  width: 30%;
  font-size: 16px;
  border-radius: 10px;
  height: 40px;
  position: absolute;
  bottom: 5%;
  left: 10%;
  display: flex;
  color: white;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(left, rgb(62, 128, 255), rgb(77, 173, 255));
}

.cancels {
  width: 30%;
  font-size: 16px;
  border-radius: 10px;
  height: 40px;
  position: absolute;
  bottom: 5%;
  left: 60%;
  display: flex;
  color: white;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(left, rgb(62, 128, 255), rgb(77, 173, 255));
}

.yanzheng {
  background: url("../assets/stars.png");
  background-size: 100% 100%;
  height: 400px;
  width: 80%;
  font-size: 18px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.yanzheng_ {
  /*background: url("../assets/stars.png");*/
  /*background-size: 100% 100%;*/
  overflow-y: scroll;
  height: 600px;
  width: 80%;
  font-size: 18px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.yuedu_ {
  width: 80%;
  font-size: 18px;
  border-radius: 10px;
  height: 50px;
  position: absolute;
  bottom: 10%;
  left: 10%;
  display: flex;
  color: white;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(left, rgb(62, 128, 255), rgb(77, 173, 255));
}
</style>


